<template>
	<view class="indexContainer">
		<view class="userContainer">
		  <view class="userInfo">
			  <img class="user_avatar" :src="userInfo.avatarUrl" alt="">
			  <view class="user_info">
				  <p class="user_name">
					  {{userInfo.nickName}}
				  </p>
				  <p class="user_job">{{info.userPosition}}</p>
			  </view>
		  </view>
		  <text class="goto_pc cuIcon-right" @click="gotoPc"></text>
		</view>
		<view class="remindContainer" @tap="gotoInfo">
			<view class="remind_info">
				<view class="remind_content">
					<text class="remind_ico cuIcon-notification"></text>
					<text class="remind_text">您今天的日报已经成功提交！</text>
				</view>
				<text class="remind_ico goto_remind_more cuIcon-right"></text>
			</view>
		</view>
		<view class="workTableContainer">
			<view class="work_table">
				<view class="topic">工作台</view>
				<view class="flex">
					<view v-for="(item,index) in tableItems" :key="index" class="work_table_item">
						<view @tap="navTo(item.url)">
							<text :style="{color: item.color}" :class="item.icon"></text>
							<view>{{ item.text }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="workEfficiencyContainer">
			<view class="work_efficiency">
				<view class="topic">
					<view>
						工作效率
						<text class="cuIcon-question effIco"></text>
					</view>
					<view class="work_effBtn">
						<view @tap="change(true)" :class="isSelect?'bg-grey':''">
							近7日
						</view>
						<view @tap="change(false)" :class="isSelect?'':'bg-grey'">
							近30日
						</view>
					</view>
				</view>
			</view>
			<view class="qiun-charts" >
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaArea=null;
	export default {
		data() {
			return {
				appid: 'wxa520625051558758', //这里是我的appid，需要改成你自己的
				secret: '484cdbcda8a5cf07032be7dc4d2c0879',//密钥也要改成你自己的
				isSelect:true,
				sevData:null,
				thrData:null,
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				userInfo: {
					nickName: ''
				},
				info: {},
				isShow: true, // 用户没有授权
				tableItems: [
					{
						icon:"cuIcon-edit",
						text:"考勤",
						color: "#39B54A",
						url: '../signed/signed'
					},
					{
						icon:"cuIcon-friend",
						text:"拜访",
						color: "#8DC63F",
						url: '../visit/visit'
					},
					{
						icon:"cuIcon-form",
						text:"日报",
						color: "#F37B1D",
						url: '../signed/signed'
					},
					{
						icon:"cuIcon-activity",
						text:"活动",
						color: "#9C26B0",
						url: '../signed/signed'
					}
				]
			}
		},
		onLoad() {
			_self = this;
			this.cWidth=uni.upx2px(700);
			this.cHeight=uni.upx2px(382);
			let self = this;
			uni.login({
				provider: 'weixin',
				success: function(res) {
					if (res.code) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(res) {
								self.userInfo = res.userInfo
								getApp().globalData.userInfo = res.userInfo;
								console.log(self.userInfo)
							},
							fail(res) {
								uni.redirectTo({
									url:'../loginView/loginView'
								})
							}
						});
						let appid = self.appid; //这里是我的appid，需要改成你自己的
						let secret = self.secret; //密钥也要改成你自己的
						let openid = '';
						let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + res.code + '&grant_type=authorization_code';
						
						uni.request({
							url: url,
							data: {},
							method: 'GET',
							success: function(res) {
								let obj = {};
								obj.openid = res.data.openid;
								console.log(obj.openid)
								getApp().globalData.openId = res.data.openid;
								obj.expires_in = Date.now() + res.data.expires_in;
								uni.request({
								    // url: 'http://www.wayforever.top:8090/user/register', //仅为示例，并非真实接口地址。
									url: 'http://www.wayforever.top:8090/user/login',
									method: 'POST',
								    data: {
								        "openid": obj.openid
								    },
								    success: (res) => {
										self.info = res.data.info
										console.log(res)
										let Area={categories:[],series:[]};
										Area.categories = _self.info.categories
										Area.series= [{
												name: '成交量B',
												data: _self.info.num,
												color: '#B7C9E8'
											}]
										_self.sevData = Area;
										_self.showArea("canvasArea",Area);
								    },
									fail:(error) => {
									}
								});
							}
						});
					} else {
						console.log('获取用户登录态失败！' + res.errMsg);
					}
				}
			});
			
		},
		methods: {
			showArea(canvasId,chartData){
				canvaArea=new uCharts({
					$this:_self,
					canvasId: canvasId,
					// 区域图
					type: 'area',
					fontSize:11,
					legend:{show:false},
					// 显示数据
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid:true,
						dashLength:8
					},
					yAxis: {
						disableGrid: true,
						// gridType:'dash',
						// gridColor:'#CCCCCC',
						min:0,
						max:100
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						area:{
							type: 'straight',
							opacity:0.5,
							addLine:true,
							width:2
						}
					}
				});
			},
			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			change(flag) {
				let end = false;
				if(this.isSelect != flag)
				{
					this.isSelect = flag;
				} else {
					end = true;
				}
				if (!end){
					if(this.isSelect) {
						canvaArea.updateData(this.sevData)
					} else {
						if(!this.thrData){
							this.thrData = {
								categories:['2.1', '2.5', '2.9', '2.13', '2.19', '2.25','2.30'],
								series: [{
										name: '成交量B',
										data: [90, 85, 85, 68, 79, 83, 65],
										color: '#B7C9E8'
									}]
							}
						}
						canvaArea.updateData(this.thrData)
					}
				}
			},
			gotoPc() {
				uni.navigateTo({
					url:'../person/personCenter'
				})
			},
			gotoInfo() {
				uni.navigateTo({
					url:'../information/information'
				})
			},
			navTo(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
	.indexContainer {
		display: flex;
		flex-direction: column;
	}

	.userContainer{
		padding-top: 25rpx;
		padding-bottom: 55rpx;
		width: 100%;
		display: flex;
		background-color: #5275AB;
		justify-content: space-between;
	}
	.userInfo{
		display: flex;
		margin-left: 40rpx;
	}

	.user_avatar{
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}

	.user_info{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		padding: 0 10rpx;

	}

	.user_info p {
		font-size: 28rpx;
		color: #ffffff;
	}

	.goto_pc{
		padding-right: 40rpx;
		margin: auto 0 ;
		color: #FFFFFF;
	}

	.remindContainer{
		position: relative;
		top: -25rpx;
	}
	.work_table,.remind_info,.work_efficiency{
		width: 700rpx;
		border-radius: 10rpx;
		background-color: #F8F8F8;
		margin: 0 auto;
	}
	.remind_info{
		display: flex;
		height: 104rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}
	.remind_content{
		display: flex;
		align-items: center;
	}
	.remind_ico{
		font-size: 40rpx;
		color: #101010;
	}
	.goto_remind_more{
		color: #ABABAB;
	}
	.remind_text {
		font-size: 28rpx;
		padding-left: 25rpx;
		color: #101010;
	}
	.workTableContainer{
		position: relative;
		top: -5rpx;
	}
	.work_table{
		
	}
	.topic {
		font-weight: 800;
		color: #1C1C19;
		font-size: 28rpx;
		padding:20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.work_table_item{
		width: 25%;
		height: 168rpx;
		border: 1rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		line-height: 50rpx;
		font-size: 26rpx;
	}
	.work_table_item text {
		font-size: 45rpx;
	}
	.workEfficiencyContainer{
		position: relative;
		top: 15rpx;
	}
	.effIco{
		color: #4D78AE;
		padding-left: 20rpx;
		font-size: 34rpx;
	}
	.work_effBtn{
		display: flex;
		font-size: 24rpx;
		font-weight: 600;
	}
	
	.work_effBtn view {
		width: 102rpx;
		height: 40rpx;
		border: 1px solid #D9D9D9;
		text-align: center;
	}
	
	.work_effBtn view:nth-child(1){
		border-radius: 20rpx 0 0 20rpx;
	}
	.work_effBtn view:nth-child(2){
		border-radius: 0 20rpx 20rpx 0;
	}
	.qiun-charts {
		height: 422upx;
		width: 700upx;
		padding-top: 40upx;
		margin: 0 auto;
		background-color: #F8F8F8;
	}
	.charts {
		margin: 0 auto;
		height: 382upx;
		width: 700upx;
		
	}
</style>
